<template>
  <div style="margin-top: 20px;margin-left: 20px;margin-right: 20px">
    <el-row>
      <el-row>
        <el-button @click="getList(0)" type="primary">分散式</el-button>
        <el-button @click="getList(1)" type="primary">集中式</el-button>
      </el-row>
      <el-row>
        <el-form :inline="true" :model="formRoom" class="demo-form-inline">
          <el-form-item label="省市县" prop="cityList">
            <el-cascader
              v-model="formRoom.cityList"
              :options="options"
              clearable
              :props="{ expandTrigger: 'hover' }"
              @change="handleChange"></el-cascader>
          </el-form-item>
          <el-form-item>
            <el-input v-model="formRoom.preName" placeholder="搜索:小区名,公寓名,房间号,租客名"></el-input>
          </el-form-item>
          <el-form-item>
            <template>
              <el-button type="primary" @click="search">搜索</el-button>
            </template>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="全部" name="one">
            <div v-if="roomList!=null">
              <div v-if="this.hostType==0">
            <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                        <tr>
                          <td><span v-html="info.findPreName"></span><td/>
                          <td>(<span v-html="info.bdiNo"></span>)<td/>
                          <td>
                            <span style="margin-left:20px;" v-if="info.leaseType==0">整租</span>
                            <span style="margin-left:20px;" v-else>合租</span><td/>
                          <td>
                            <span style="margin-left:20px;" v-if="info.publishStatus==1">已发布</span>
                            <span style="margin-left:20px;" v-else>待发布</span>
                          <td/>
                          <td>房间数:{{info.roomCount}}套<td/>
                          <td><el-button type="primary">修改</el-button><td/>
                          <td>
                            <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                            <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                          <td/>
                          <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                        </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.roomMni">
                        <div style="width: 300px">
                        <!--未出租-->
                        <div v-if="item.roomStatus==0" style="width:150px">

                          <el-card class="box-card" @click.native="openTags" shadow="hover">
                            <div class="clearfix">
                              <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                              <span style="color: mediumspringgreen">空置{{item.leisureDate}}天</span>
                            </div>
                            <p style="line-height: 2;background-color: mediumspringgreen">{{item.rental}}元/月</p>
                          </el-card>

                        </div>

                        <!--已出租-->
                        <div v-else-if="item.roomStatus==1" style="width:150px">
                          <el-card class="box-card" @click.native="openTags" shadow="hover">
                            <div class="clearfix">
                              <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                              <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                            </div>
                            <p style="line-height: 2;background-color: yellow">{{item.rental}}元/月</p>
                          </el-card>
                        </div>

                        <!--装修-->
                        <div v-else style="width:150px">
                          <el-card class="box-card" @click.native="openTags" shadow="hover">
                            <div class="clearfix">
                              <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                              <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                            </div>
                            <p style="line-height: 2;background-color: #8492a6">{{item.rental}}元/月</p>
                          </el-card>
                        </div>
                      </div>
                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
             <el-button @click="prePage">上一页</el-button>
             <el-button @click="nextPage">下一页</el-button>
            </el-card>
              </div>
              <!-----------------------------集中式开始--------------------------->
              <div v-if="hostType==1">

                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.flatName"></span><td/>
                        <td>(<span v-html="info.preName"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.status==0">集中式公寓</span>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.ldDetail">
                        <el-button>{{item.buildingName}}栋</el-button>
                        <span>数据统计: 空置 {{item.vacancyNum}} 间，共 {{item.total}} 间</span>
                        <br/>
                        <div v-for="each in item.miniDetail">
                          <span>{{each.floor}}层</span>
                          <div v-for="it in each.miniDetail">
                                                    <div style="width: 300px">
                          <!--未出租-->
                          <div v-if="it.roomStatus==0" style="width:150px">

                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                <span style="color: mediumspringgreen">空置{{it.leisureDate}}天</span>
                              </div>
                              <p style="line-height: 2;background-color: mediumspringgreen">{{it.rental}}元/月</p>
                            </el-card>

                          </div>

                          <!--已出租-->
                          <div v-else-if="it.roomStatus==1" style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: yellow">{{it.rental}}元/月</p>
                            </el-card>
                          </div>

                          <!--装修-->
                          <div v-else style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: #8492a6">{{it.rental}}元/月</p>
                            </el-card>
                          </div>
                        </div>
                          </div>
                        </div>

                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>



              </div>
              <!-----------------------------集中式结束--------------------------->
            </div>
            <div v-else>
              <h1>暂无房源数据,请先添加房源</h1>
            </div>
          </el-tab-pane>
          <el-tab-pane label="租房分期" name="two">
            <div v-if="roomList!=null">
              <div v-if="this.hostType==0">
                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.findPreName"></span><td/>
                        <td>(<span v-html="info.bdiNo"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.leaseType==0">整租</span>
                          <span style="margin-left:20px;" v-else>合租</span><td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.publishStatus==1">已发布</span>
                          <span style="margin-left:20px;" v-else>待发布</span>
                        <td/>
                        <td>房间数:{{info.roomCount}}套<td/>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.roomMni">
                        <div style="width: 300px">
                          <!--未出租-->
                          <div v-if="item.roomStatus==0" style="width:150px">

                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="color: mediumspringgreen">空置{{item.leisureDate}}天</span>
                              </div>
                              <p style="line-height: 2;background-color: mediumspringgreen">{{item.rental}}元/月</p>
                            </el-card>

                          </div>

                          <!--已出租-->
                          <div v-else-if="item.roomStatus==1" style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: yellow">{{item.rental}}元/月</p>
                            </el-card>
                          </div>

                          <!--装修-->
                          <div v-else style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: #8492a6">{{item.rental}}元/月</p>
                            </el-card>
                          </div>
                        </div>
                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>
              </div>
              <!-----------------------------集中式开始--------------------------->
              <div v-if="hostType==1">

                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.flatName"></span><td/>
                        <td>(<span v-html="info.preName"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.status==0">集中式公寓</span>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.ldDetail">
                        <el-button>{{item.buildingName}}栋</el-button>
                        <span>数据统计: 空置 {{item.vacancyNum}} 间，共 {{item.total}} 间</span>
                        <br/>
                        <div v-for="each in item.miniDetail">
                          <span>{{each.floor}}层</span>
                          <div v-for="it in each.miniDetail">
                            <div style="width: 300px">
                              <!--未出租-->
                              <div v-if="it.roomStatus==0" style="width:150px">

                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="color: mediumspringgreen">空置{{it.leisureDate}}天</span>
                                  </div>
                                  <p style="line-height: 2;background-color: mediumspringgreen">{{it.rental}}元/月</p>
                                </el-card>

                              </div>

                              <!--已出租-->
                              <div v-else-if="it.roomStatus==1" style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: yellow">{{it.rental}}元/月</p>
                                </el-card>
                              </div>

                              <!--装修-->
                              <div v-else style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: #8492a6">{{it.rental}}元/月</p>
                                </el-card>
                              </div>
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>



              </div>
              <!-----------------------------集中式结束--------------------------->
            </div>
            <div v-else>
              <h1>暂无房源数据,请先添加房源</h1>
            </div>
          </el-tab-pane>
          <el-tab-pane label="租约保理" name="three">
            <div v-if="roomList!=null">
              <div v-if="this.hostType==0">
                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.findPreName"></span><td/>
                        <td>(<span v-html="info.bdiNo"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.leaseType==0">整租</span>
                          <span style="margin-left:20px;" v-else>合租</span><td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.publishStatus==1">已发布</span>
                          <span style="margin-left:20px;" v-else>待发布</span>
                        <td/>
                        <td>房间数:{{info.roomCount}}套<td/>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.roomMni">
                        <div style="width: 300px">
                          <!--未出租-->
                          <div v-if="item.roomStatus==0" style="width:150px">

                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="color: mediumspringgreen">空置{{item.leisureDate}}天</span>
                              </div>
                              <p style="line-height: 2;background-color: mediumspringgreen">{{item.rental}}元/月</p>
                            </el-card>

                          </div>

                          <!--已出租-->
                          <div v-else-if="item.roomStatus==1" style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: yellow">{{item.rental}}元/月</p>
                            </el-card>
                          </div>

                          <!--装修-->
                          <div v-else style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: #8492a6">{{item.rental}}元/月</p>
                            </el-card>
                          </div>
                        </div>
                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>
              </div>
              <!-----------------------------集中式开始--------------------------->
              <div v-if="hostType==1">

                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.flatName"></span><td/>
                        <td>(<span v-html="info.preName"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.status==0">集中式公寓</span>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.ldDetail">
                        <el-button>{{item.buildingName}}栋</el-button>
                        <span>数据统计: 空置 {{item.vacancyNum}} 间，共 {{item.total}} 间</span>
                        <br/>
                        <div v-for="each in item.miniDetail">
                          <span>{{each.floor}}层</span>
                          <div v-for="it in each.miniDetail">
                            <div style="width: 300px">
                              <!--未出租-->
                              <div v-if="it.roomStatus==0" style="width:150px">

                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="color: mediumspringgreen">空置{{it.leisureDate}}天</span>
                                  </div>
                                  <p style="line-height: 2;background-color: mediumspringgreen">{{it.rental}}元/月</p>
                                </el-card>

                              </div>

                              <!--已出租-->
                              <div v-else-if="it.roomStatus==1" style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: yellow">{{it.rental}}元/月</p>
                                </el-card>
                              </div>

                              <!--装修-->
                              <div v-else style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: #8492a6">{{it.rental}}元/月</p>
                                </el-card>
                              </div>
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>



              </div>
              <!-----------------------------集中式结束--------------------------->
            </div>
            <div v-else>
              <h1>暂无房源数据,请先添加房源</h1>
            </div>
          </el-tab-pane>
          <el-tab-pane label="空闲可租" name="four">
            <div v-if="roomList!=null">
              <div v-if="this.hostType==0">
                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.findPreName"></span><td/>
                        <td>(<span v-html="info.bdiNo"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.leaseType==0">整租</span>
                          <span style="margin-left:20px;" v-else>合租</span><td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.publishStatus==1">已发布</span>
                          <span style="margin-left:20px;" v-else>待发布</span>
                        <td/>
                        <td>房间数:{{info.roomCount}}套<td/>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.roomMni">
                        <div style="width: 300px">
                          <!--未出租-->
                          <div v-if="item.roomStatus==0" style="width:150px">

                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="color: mediumspringgreen">空置{{item.leisureDate}}天</span>
                              </div>
                              <p style="line-height: 2;background-color: mediumspringgreen">{{item.rental}}元/月</p>
                            </el-card>

                          </div>

                          <!--已出租-->
                          <div v-else-if="item.roomStatus==1" style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: yellow">{{item.rental}}元/月</p>
                            </el-card>
                          </div>

                          <!--装修-->
                          <div v-else style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: #8492a6">{{item.rental}}元/月</p>
                            </el-card>
                          </div>
                        </div>
                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>
              </div>
              <!-----------------------------集中式开始--------------------------->
              <div v-if="hostType==1">

                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.flatName"></span><td/>
                        <td>(<span v-html="info.preName"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.status==0">集中式公寓</span>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.ldDetail">
                        <el-button>{{item.buildingName}}栋</el-button>
                        <span>数据统计: 空置 {{item.vacancyNum}} 间，共 {{item.total}} 间</span>
                        <br/>
                        <div v-for="each in item.miniDetail">
                          <span>{{each.floor}}层</span>
                          <div v-for="it in each.miniDetail">
                            <div style="width: 300px">
                              <!--未出租-->
                              <div v-if="it.roomStatus==0" style="width:150px">

                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="color: mediumspringgreen">空置{{it.leisureDate}}天</span>
                                  </div>
                                  <p style="line-height: 2;background-color: mediumspringgreen">{{it.rental}}元/月</p>
                                </el-card>

                              </div>

                              <!--已出租-->
                              <div v-else-if="it.roomStatus==1" style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: yellow">{{it.rental}}元/月</p>
                                </el-card>
                              </div>

                              <!--装修-->
                              <div v-else style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: #8492a6">{{it.rental}}元/月</p>
                                </el-card>
                              </div>
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>



              </div>
              <!-----------------------------集中式结束--------------------------->
            </div>
            <div v-else>
              <h1>暂无房源数据,请先添加房源</h1>
            </div>
          </el-tab-pane>
          <el-tab-pane label="欠费提醒" name="five">
            <div v-if="roomList!=null">
              <div v-if="this.hostType==0">
                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.findPreName"></span><td/>
                        <td>(<span v-html="info.bdiNo"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.leaseType==0">整租</span>
                          <span style="margin-left:20px;" v-else>合租</span><td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.publishStatus==1">已发布</span>
                          <span style="margin-left:20px;" v-else>待发布</span>
                        <td/>
                        <td>房间数:{{info.roomCount}}套<td/>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.roomMni">
                        <div style="width: 300px">
                          <!--未出租-->
                          <div v-if="item.roomStatus==0" style="width:150px">

                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="color: mediumspringgreen">空置{{item.leisureDate}}天</span>
                              </div>
                              <p style="line-height: 2;background-color: mediumspringgreen">{{item.rental}}元/月</p>
                            </el-card>

                          </div>

                          <!--已出租-->
                          <div v-else-if="item.roomStatus==1" style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: yellow">{{item.rental}}元/月</p>
                            </el-card>
                          </div>

                          <!--装修-->
                          <div v-else style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: #8492a6">{{item.rental}}元/月</p>
                            </el-card>
                          </div>
                        </div>
                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>
              </div>
              <!-----------------------------集中式开始--------------------------->
              <div v-if="hostType==1">

                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.flatName"></span><td/>
                        <td>(<span v-html="info.preName"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.status==0">集中式公寓</span>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.ldDetail">
                        <el-button>{{item.buildingName}}栋</el-button>
                        <span>数据统计: 空置 {{item.vacancyNum}} 间，共 {{item.total}} 间</span>
                        <br/>
                        <div v-for="each in item.miniDetail">
                          <span>{{each.floor}}层</span>
                          <div v-for="it in each.miniDetail">
                            <div style="width: 300px">
                              <!--未出租-->
                              <div v-if="it.roomStatus==0" style="width:150px">

                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="color: mediumspringgreen">空置{{it.leisureDate}}天</span>
                                  </div>
                                  <p style="line-height: 2;background-color: mediumspringgreen">{{it.rental}}元/月</p>
                                </el-card>

                              </div>

                              <!--已出租-->
                              <div v-else-if="it.roomStatus==1" style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: yellow">{{it.rental}}元/月</p>
                                </el-card>
                              </div>

                              <!--装修-->
                              <div v-else style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: #8492a6">{{it.rental}}元/月</p>
                                </el-card>
                              </div>
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>



              </div>
              <!-----------------------------集中式结束--------------------------->
            </div>
            <div v-else>
              <h1>暂无房源数据,请先添加房源</h1>
            </div>
          </el-tab-pane>
          <el-tab-pane label="收费提醒" name="six">
            <div v-if="roomList!=null">
              <div v-if="this.hostType==0">
                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.findPreName"></span><td/>
                        <td>(<span v-html="info.bdiNo"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.leaseType==0">整租</span>
                          <span style="margin-left:20px;" v-else>合租</span><td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.publishStatus==1">已发布</span>
                          <span style="margin-left:20px;" v-else>待发布</span>
                        <td/>
                        <td>房间数:{{info.roomCount}}套<td/>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.roomMni">
                        <div style="width: 300px">
                          <!--未出租-->
                          <div v-if="item.roomStatus==0" style="width:150px">

                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="color: mediumspringgreen">空置{{item.leisureDate}}天</span>
                              </div>
                              <p style="line-height: 2;background-color: mediumspringgreen">{{item.rental}}元/月</p>
                            </el-card>

                          </div>

                          <!--已出租-->
                          <div v-else-if="item.roomStatus==1" style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: yellow">{{item.rental}}元/月</p>
                            </el-card>
                          </div>

                          <!--装修-->
                          <div v-else style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: #8492a6">{{item.rental}}元/月</p>
                            </el-card>
                          </div>
                        </div>
                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>
              </div>
              <!-----------------------------集中式开始--------------------------->
              <div v-if="hostType==1">

                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.flatName"></span><td/>
                        <td>(<span v-html="info.preName"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.status==0">集中式公寓</span>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.ldDetail">
                        <el-button>{{item.buildingName}}栋</el-button>
                        <span>数据统计: 空置 {{item.vacancyNum}} 间，共 {{item.total}} 间</span>
                        <br/>
                        <div v-for="each in item.miniDetail">
                          <span>{{each.floor}}层</span>
                          <div v-for="it in each.miniDetail">
                            <div style="width: 300px">
                              <!--未出租-->
                              <div v-if="it.roomStatus==0" style="width:150px">

                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="color: mediumspringgreen">空置{{it.leisureDate}}天</span>
                                  </div>
                                  <p style="line-height: 2;background-color: mediumspringgreen">{{it.rental}}元/月</p>
                                </el-card>

                              </div>

                              <!--已出租-->
                              <div v-else-if="it.roomStatus==1" style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: yellow">{{it.rental}}元/月</p>
                                </el-card>
                              </div>

                              <!--装修-->
                              <div v-else style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: #8492a6">{{it.rental}}元/月</p>
                                </el-card>
                              </div>
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>



              </div>
              <!-----------------------------集中式结束--------------------------->
            </div>
            <div v-else>
              <h1>暂无房源数据,请先添加房源</h1>
            </div>
          </el-tab-pane>
          <el-tab-pane label="合同快到期" name="seven">
            <div v-if="roomList!=null">
              <div v-if="this.hostType==0">
                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.findPreName"></span><td/>
                        <td>(<span v-html="info.bdiNo"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.leaseType==0">整租</span>
                          <span style="margin-left:20px;" v-else>合租</span><td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.publishStatus==1">已发布</span>
                          <span style="margin-left:20px;" v-else>待发布</span>
                        <td/>
                        <td>房间数:{{info.roomCount}}套<td/>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.roomMni">
                        <div style="width: 300px">
                          <!--未出租-->
                          <div v-if="item.roomStatus==0" style="width:150px">

                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="color: mediumspringgreen">空置{{item.leisureDate}}天</span>
                              </div>
                              <p style="line-height: 2;background-color: mediumspringgreen">{{item.rental}}元/月</p>
                            </el-card>

                          </div>

                          <!--已出租-->
                          <div v-else-if="item.roomStatus==1" style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: yellow">{{item.rental}}元/月</p>
                            </el-card>
                          </div>

                          <!--装修-->
                          <div v-else style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: #8492a6">{{item.rental}}元/月</p>
                            </el-card>
                          </div>
                        </div>
                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>
              </div>
              <!-----------------------------集中式开始--------------------------->
              <div v-if="hostType==1">

                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.flatName"></span><td/>
                        <td>(<span v-html="info.preName"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.status==0">集中式公寓</span>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.ldDetail">
                        <el-button>{{item.buildingName}}栋</el-button>
                        <span>数据统计: 空置 {{item.vacancyNum}} 间，共 {{item.total}} 间</span>
                        <br/>
                        <div v-for="each in item.miniDetail">
                          <span>{{each.floor}}层</span>
                          <div v-for="it in each.miniDetail">
                            <div style="width: 300px">
                              <!--未出租-->
                              <div v-if="it.roomStatus==0" style="width:150px">

                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="color: mediumspringgreen">空置{{it.leisureDate}}天</span>
                                  </div>
                                  <p style="line-height: 2;background-color: mediumspringgreen">{{it.rental}}元/月</p>
                                </el-card>

                              </div>

                              <!--已出租-->
                              <div v-else-if="it.roomStatus==1" style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: yellow">{{it.rental}}元/月</p>
                                </el-card>
                              </div>

                              <!--装修-->
                              <div v-else style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: #8492a6">{{it.rental}}元/月</p>
                                </el-card>
                              </div>
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>



              </div>
              <!-----------------------------集中式结束--------------------------->
            </div>
            <div v-else>
              <h1>暂无房源数据,请先添加房源</h1>
            </div>
          </el-tab-pane>
          <el-tab-pane label="合同已到期" name="eight">
            <div v-if="roomList!=null">
              <div v-if="this.hostType==0">
                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.findPreName"></span><td/>
                        <td>(<span v-html="info.bdiNo"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.leaseType==0">整租</span>
                          <span style="margin-left:20px;" v-else>合租</span><td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.publishStatus==1">已发布</span>
                          <span style="margin-left:20px;" v-else>待发布</span>
                        <td/>
                        <td>房间数:{{info.roomCount}}套<td/>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.roomMni">
                        <div style="width: 300px">
                          <!--未出租-->
                          <div v-if="item.roomStatus==0" style="width:150px">

                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="color: mediumspringgreen">空置{{item.leisureDate}}天</span>
                              </div>
                              <p style="line-height: 2;background-color: mediumspringgreen">{{item.rental}}元/月</p>
                            </el-card>

                          </div>

                          <!--已出租-->
                          <div v-else-if="item.roomStatus==1" style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: yellow">{{item.rental}}元/月</p>
                            </el-card>
                          </div>

                          <!--装修-->
                          <div v-else style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: #8492a6">{{item.rental}}元/月</p>
                            </el-card>
                          </div>
                        </div>
                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>
              </div>
              <!-----------------------------集中式开始--------------------------->
              <div v-if="hostType==1">

                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.flatName"></span><td/>
                        <td>(<span v-html="info.preName"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.status==0">集中式公寓</span>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.ldDetail">
                        <el-button>{{item.buildingName}}栋</el-button>
                        <span>数据统计: 空置 {{item.vacancyNum}} 间，共 {{item.total}} 间</span>
                        <br/>
                        <div v-for="each in item.miniDetail">
                          <span>{{each.floor}}层</span>
                          <div v-for="it in each.miniDetail">
                            <div style="width: 300px">
                              <!--未出租-->
                              <div v-if="it.roomStatus==0" style="width:150px">

                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="color: mediumspringgreen">空置{{it.leisureDate}}天</span>
                                  </div>
                                  <p style="line-height: 2;background-color: mediumspringgreen">{{it.rental}}元/月</p>
                                </el-card>

                              </div>

                              <!--已出租-->
                              <div v-else-if="it.roomStatus==1" style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: yellow">{{it.rental}}元/月</p>
                                </el-card>
                              </div>

                              <!--装修-->
                              <div v-else style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: #8492a6">{{it.rental}}元/月</p>
                                </el-card>
                              </div>
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>



              </div>
              <!-----------------------------集中式结束--------------------------->
            </div>
            <div v-else>
              <h1>暂无房源数据,请先添加房源</h1>
            </div>
          </el-tab-pane>
          <el-tab-pane label="装修维护" name="nine">
            <div v-if="roomList!=null">
              <div v-if="this.hostType==0">
                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.findPreName"></span><td/>
                        <td>(<span v-html="info.bdiNo"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.leaseType==0">整租</span>
                          <span style="margin-left:20px;" v-else>合租</span><td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.publishStatus==1">已发布</span>
                          <span style="margin-left:20px;" v-else>待发布</span>
                        <td/>
                        <td>房间数:{{info.roomCount}}套<td/>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.roomMni">
                        <div style="width: 300px">
                          <!--未出租-->
                          <div v-if="item.roomStatus==0" style="width:150px">

                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="color: mediumspringgreen">空置{{item.leisureDate}}天</span>
                              </div>
                              <p style="line-height: 2;background-color: mediumspringgreen">{{item.rental}}元/月</p>
                            </el-card>

                          </div>

                          <!--已出租-->
                          <div v-else-if="item.roomStatus==1" style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: yellow">{{item.rental}}元/月</p>
                            </el-card>
                          </div>

                          <!--装修-->
                          <div v-else style="width:150px">
                            <el-card class="box-card" @click.native="openTags" shadow="hover">
                              <div class="clearfix">
                                <h4 v-html="item.roomCode" style="margin-left: 30px"></h4>
                                <span style="text-align: center;margin-left: 20px">{{item.tenantName}}</span>
                              </div>
                              <p style="line-height: 2;background-color: #8492a6">{{item.rental}}元/月</p>
                            </el-card>
                          </div>
                        </div>
                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>
              </div>
              <!-----------------------------集中式开始--------------------------->
              <div v-if="hostType==1">

                <el-card style="background-color: #d9d9d9">

                  <div v-for="info in roomList">
                    <table>
                      <thead>
                      <tr>
                        <td><span v-html="info.flatName"></span><td/>
                        <td>(<span v-html="info.preName"></span>)<td/>
                        <td>
                          <span style="margin-left:20px;" v-if="info.status==0">集中式公寓</span>
                        <td><el-button type="primary">修改</el-button><td/>
                        <td>
                          <span v-if="info.publishStatus==1"><el-button type="primary" @click="updatePublish(0,info.houseId)">取消发布</el-button></span>
                          <span v-else><el-button type="primary" @click="updatePublish(1,info.houseId)">发布</el-button></span>
                        <td/>
                        <td><el-button type="danger" @click="del(info.houseId)">删除</el-button><td/>
                      </tr>
                      </thead>
                    </table>
                    <div>
                      <div v-for="item in info.ldDetail">
                        <el-button>{{item.buildingName}}栋</el-button>
                        <span>数据统计: 空置 {{item.vacancyNum}} 间，共 {{item.total}} 间</span>
                        <br/>
                        <div v-for="each in item.miniDetail">
                          <span>{{each.floor}}层</span>
                          <div v-for="it in each.miniDetail">
                            <div style="width: 300px">
                              <!--未出租-->
                              <div v-if="it.roomStatus==0" style="width:150px">

                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="color: mediumspringgreen">空置{{it.leisureDate}}天</span>
                                  </div>
                                  <p style="line-height: 2;background-color: mediumspringgreen">{{it.rental}}元/月</p>
                                </el-card>

                              </div>

                              <!--已出租-->
                              <div v-else-if="it.roomStatus==1" style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: yellow">{{it.rental}}元/月</p>
                                </el-card>
                              </div>

                              <!--装修-->
                              <div v-else style="width:150px">
                                <el-card class="box-card" @click.native="openTags" shadow="hover">
                                  <div class="clearfix">
                                    <h4 v-html="it.roomCode" style="margin-left: 30px"></h4>
                                    <span style="text-align: center;margin-left: 20px">{{it.tenantName}}</span>
                                  </div>
                                  <p style="line-height: 2;background-color: #8492a6">{{it.rental}}元/月</p>
                                </el-card>
                              </div>
                            </div>
                          </div>
                        </div>

                      </div>
                    </div>



                    <el-dialog
                      title="提示"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                      <span>

                      </span>
                      <span slot="footer" class="dialog-footer">
                      <el-button @click="dialogVisible = false">取 消</el-button>
                      <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                    </el-dialog>



                  </div>
                  <el-button @click="prePage">上一页</el-button>
                  <el-button @click="nextPage">下一页</el-button>
                </el-card>



              </div>
              <!-----------------------------集中式结束--------------------------->
            </div>
            <div v-else>
              <h1>暂无房源数据,请先添加房源</h1>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </el-row>
  </div>
</template>

<script>
import { getList,updatePublishStatus } from "@/api/system/info";
import {getCityList} from "@/api/system/business";
export default {
  name: "room_info",
  data(){
    return{
      activeName:'one',
      value:[],
      roomList:[],
      hostType:0,
      options:[],
      data:[],
      totalPage: [],
      formRoom:{
        pageNum:1,
        pageSize:10,
        hostType:0,
        preName:'',
      },
      currentPage:0,
      dialogVisible:false,
    }
  },
  methods:{
    handleClick(tab, event) {
      console.log("tab:::",tab, event);
      if(tab._data.index==1){
        this.formRoom.fangtaiType=4;
        this.getList(this.hostType);
      }else if(tab._data.index==2){
        this.formRoom.fangtaiType=3;
        this.getList(this.hostType);
      }else if(tab._data.index==3){
        this.formRoom.fangtaiType=1;
        this.getList(this.hostType);
      }else if(tab._data.index==4){
        this.formRoom.fangtaiType=6;
        this.getList(this.hostType);
      }else if(tab._data.index==5){
        this.formRoom.fangtaiType=5;
        this.getList(this.hostType);
      }else if(tab._data.index==6){
        this.formRoom.fangtaiType=7;
        this.getList(this.hostType);
      }else if(tab._data.index==7){
        this.formRoom.fangtaiType=8;
        this.getList(this.hostType);
      }else if(tab._data.index==8){
        this.formRoom.fangtaiType=2;
        this.getList(this.hostType);
      }

    },
    getList(hostType){
      this.hostType=hostType;
      this.formRoom.hostType=hostType;
      getList(this.formRoom).then(response=>{
        this.data=response.rows;
        if(this.data!=null){
          this.formRoom.pageNum = Math.ceil(this.data.length / this.formRoom.pageSize) || 1;
          for (let i = 0; i < this.formRoom.pageNum; i++) {
            // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
            // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
            this.totalPage[i] = this.data.slice(this.formRoom.pageSize * i, this.formRoom.pageSize * (i + 1))
          }
          // 获取到数据后显示第一页内容
          this.roomList = this.totalPage[this.currentPage];
          console.log("房态图数据::",response.rows);
        }else{
          this.roomList=null;
        }
      })
    },
    nextPage() {
      if (this.currentPage === this.pageNum - 1) return ;
      this.roomList = this.totalPage[++this.currentPage];
    },
    // 上一页
    prePage() {
      if (this.currentPage === 0) return ;
      this.roomList = this.totalPage[--this.currentPage];
    },
    openTags(){
      this.dialogVisible=true;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    handleChange(value) {
      this.formRoom.province=value[0];
      this.formRoom.city=value[1];
      this.formRoom.county=value[2];
      this.value=value;
      console.log(value);
    },
    search(){
      this.formRoom.pageNum=1;
      this.getList(this.hostType);
    },
    getCityList(){
      getCityList().then(response=>{
        console.log(response);
        this.options=response.data;
      })
    },
    updatePublish(publish,houseId){
      if(publish==1){
        if(confirm("确定要发布房产吗?")){
          this.updatePublishStatus(publish,houseId);
        }
      }else{
        if(confirm("确定要取消发布房产吗？")){
          this.updatePublishStatus(publish,houseId);
        }
      }
    },
    updatePublishStatus(publish,houseId){
      this.formRoom.publishStatus=publish;
      this.formRoom.houseId=houseId;
      updatePublishStatus(this.formRoom).then(response=>{
        if(response.code==200){
          this.$message.success("操作成功");
          this.getList(this.hostType);
        }
      })
    },
    del(houseId){
      if(confirm("您确定要删除吗?")){
        this.formRoom.houseId=houseId;
        console.log("删除时::",this.formRoom);
        updatePublishStatus(this.formRoom).then(response=>{
          if(response.code==200){
            this.$message.success("操作成功");
            this.getList(this.hostType);
          }
        })
      }
    }
  },
  created() {
    this.getList(0);
    this.getCityList();
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 150px;
}
</style>
